<template>
  <BasePage title="上报时间设置">
    <div class="bg-white rounded-lg shadow p-6">
      <div class="mb-8">
        <h2 class="text-lg font-medium text-gray-900 mb-4">当前上报时间设置</h2>
        <div class="bg-blue-50 border-l-4 border-blue-400 p-4 mb-6">
          <div class="flex">
            <div class="flex-shrink-0">
              <svg class="h-5 w-5 text-blue-400" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
              </svg>
            </div>
            <div class="ml-3">
              <p class="text-sm text-blue-700">
                当前设置的上报时间为每{{ currentSettings.dayType === 'workday' ? '个工作日' : '天' }}的
                {{ currentSettings.startTime }} 至 {{ currentSettings.endTime }}。
                {{ currentSettings.isActive ? '上报功能已开启' : '上报功能已关闭' }}。
              </p>
            </div>
          </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">上报日期类型</label>
            <div class="mt-1">
              <div class="flex items-center space-x-4">
                <div class="flex items-center">
                  <input
                    id="day-type-everyday"
                    v-model="settings.dayType"
                    name="day-type"
                    type="radio"
                    value="everyday"
                    class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300"
                  />
                  <label for="day-type-everyday" class="ml-2 block text-sm text-gray-700">每天</label>
                </div>
                <div class="flex items-center">
                  <input
                    id="day-type-workday"
                    v-model="settings.dayType"
                    name="day-type"
                    type="radio"
                    value="workday"
                    class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300"
                  />
                  <label for="day-type-workday" class="ml-2 block text-sm text-gray-700">工作日</label>
                </div>
              </div>
            </div>
          </div>

          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">上报功能状态</label>
            <div class="mt-1">
              <label class="inline-flex items-center cursor-pointer">
                <input type="checkbox" v-model="settings.isActive" class="sr-only peer" />
                <div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
                <span class="ml-3 text-sm font-medium text-gray-700">{{ settings.isActive ? '已开启' : '已关闭' }}</span>
              </label>
            </div>
          </div>

          <div>
            <label for="start-time" class="block text-sm font-medium text-gray-700 mb-2">开始时间</label>
            <input
              type="time"
              id="start-time"
              v-model="settings.startTime"
              class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
            />
          </div>

          <div>
            <label for="end-time" class="block text-sm font-medium text-gray-700 mb-2">结束时间</label>
            <input
              type="time"
              id="end-time"
              v-model="settings.endTime"
              class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
            />
          </div>
        </div>
      </div>

      <div class="mb-8">
        <h2 class="text-lg font-medium text-gray-900 mb-4">免上报设置</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">免上报功能</label>
            <div class="mt-1">
              <label class="inline-flex items-center cursor-pointer">
                <input type="checkbox" v-model="settings.exemptEnabled" class="sr-only peer" />
                <div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
                <span class="ml-3 text-sm font-medium text-gray-700">{{ settings.exemptEnabled ? '已开启' : '已关闭' }}</span>
              </label>
            </div>
          </div>

          <div>
            <label for="exempt-max-days" class="block text-sm font-medium text-gray-700 mb-2">最大免上报天数</label>
            <input
              type="number"
              id="exempt-max-days"
              v-model.number="settings.exemptMaxDays"
              min="1"
              max="30"
              class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
              :disabled="!settings.exemptEnabled"
            />
          </div>
        </div>
      </div>

      <div class="mb-8">
        <h2 class="text-lg font-medium text-gray-900 mb-4">提醒设置</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">未上报提醒</label>
            <div class="mt-1">
              <label class="inline-flex items-center cursor-pointer">
                <input type="checkbox" v-model="settings.reminderEnabled" class="sr-only peer" />
                <div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
                <span class="ml-3 text-sm font-medium text-gray-700">{{ settings.reminderEnabled ? '已开启' : '已关闭' }}</span>
              </label>
            </div>
          </div>

          <div>
            <label for="reminder-time" class="block text-sm font-medium text-gray-700 mb-2">提醒时间</label>
            <input
              type="time"
              id="reminder-time"
              v-model="settings.reminderTime"
              class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
              :disabled="!settings.reminderEnabled"
            />
          </div>
        </div>
      </div>

      <div class="mb-8">
        <h2 class="text-lg font-medium text-gray-900 mb-4">历史设置记录</h2>
        <div class="overflow-x-auto">
          <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
              <tr>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">修改时间</th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">修改人</th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">上报时间</th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
              </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
              <tr v-for="(record, index) in historyRecords" :key="index">
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ record.modifiedAt }}</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ record.modifiedBy }}</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                  {{ record.dayType === 'workday' ? '工作日' : '每天' }} {{ record.startTime }} - {{ record.endTime }}
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm">
                  <span
                    :class="{
                      'px-2 py-1 rounded-full text-xs font-medium': true,
                      'bg-green-100 text-green-800': record.isActive,
                      'bg-red-100 text-red-800': !record.isActive
                    }"
                  >
                    {{ record.isActive ? '已开启' : '已关闭' }}
                  </span>
                </td>
              </tr>
              <tr v-if="historyRecords.length === 0">
                <td colspan="4" class="px-6 py-4 text-center text-gray-500">暂无历史记录</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <div class="flex justify-end">
        <button
          @click="resetForm"
          type="button"
          class="mr-3 inline-flex justify-center py-2 px-4 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
        >
          重置
        </button>
        <button
          @click="saveSettings"
          type="button"
          class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
        >
          保存设置
        </button>
      </div>
    </div>
  </BasePage>
</template>

<script>
import { ref, reactive, onMounted } from 'vue';
import BasePage from '../../components/BasePage.vue';

export default {
  name: 'ReportTime',
  components: {
    BasePage
  },
  setup() {
    // 当前设置
    const currentSettings = reactive({
      dayType: 'workday',
      startTime: '08:00',
      endTime: '22:00',
      isActive: true,
      exemptEnabled: true,
      exemptMaxDays: 7,
      reminderEnabled: true,
      reminderTime: '20:00'
    });

    // 编辑设置
    const settings = reactive({
      dayType: 'workday',
      startTime: '08:00',
      endTime: '22:00',
      isActive: true,
      exemptEnabled: true,
      exemptMaxDays: 7,
      reminderEnabled: true,
      reminderTime: '20:00'
    });

    // 历史记录
    const historyRecords = ref([
      {
        modifiedAt: '2023-05-10 14:30:22',
        modifiedBy: '管理员 (10001)',
        dayType: 'workday',
        startTime: '08:00',
        endTime: '22:00',
        isActive: true
      },
      {
        modifiedAt: '2023-04-15 09:45:10',
        modifiedBy: '管理员 (10001)',
        dayType: 'everyday',
        startTime: '09:00',
        endTime: '21:00',
        isActive: true
      },
      {
        modifiedAt: '2023-03-20 16:20:45',
        modifiedBy: '管理员 (10002)',
        dayType: 'workday',
        startTime: '08:30',
        endTime: '21:30',
        isActive: false
      }
    ]);

    // 初始化
    onMounted(() => {
      // 模拟从API获取当前设置
      // 这里直接使用预设值
      Object.assign(settings, currentSettings);
    });

    // 重置表单
    const resetForm = () => {
      Object.assign(settings, currentSettings);
    };

    // 保存设置
    const saveSettings = () => {
      // 验证时间
      if (settings.startTime >= settings.endTime) {
        alert('开始时间必须早于结束时间');
        return;
      }

      // 模拟API保存
      setTimeout(() => {
        // 更新当前设置
        Object.assign(currentSettings, settings);
        
        // 添加到历史记录
        const now = new Date();
        const formattedDate = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`;
        
        historyRecords.value.unshift({
          modifiedAt: formattedDate,
          modifiedBy: '当前管理员 (10001)',
          dayType: settings.dayType,
          startTime: settings.startTime,
          endTime: settings.endTime,
          isActive: settings.isActive
        });
        
        alert('设置已保存');
      }, 500);
    };

    return {
      currentSettings,
      settings,
      historyRecords,
      resetForm,
      saveSettings
    };
  }
};
</script>

<style scoped>
/* 可以添加自定义样式 */
</style>